<template>
  <div class="plan-select-layout">
    <div class="nav">
      <div class="head">
        <div class="location">
          <i class="icon-head"></i>
          <span class="city">武汉</span>
        </div>
        <input type="search" class="query-inp" placeholder="请输入你想查询的线路名/站点名" @focus="toSearch">
      </div>
      <nav class="menu">
        <a @click="lessTime"><span>推荐路线</span></a>
        <a @click="lessWalk"><span>少步行</span></a>
        <a @click="lessChange"><span>少换乘</span></a>
        <a @click="noSubway"><span>不坐地铁</span></a>
      </nav>
    </div>
    <ul class="plan-list">
      <li v-for="(item,index) in planDetail" v-show="item.noSubway" @click="toPlanDetail(item)">
        <div class="plan-line">
          <span class="line" v-for="(item2,index2) in item.lines">
              {{item2.lineNo}}
            <i class="fa fa-long-arrow-right arrow" aria-hidden="true" v-if="index2!==item.lines.length-1"></i>
          </span>
          <i class="icon-fast" v-show="item.fast"></i>
          <i class="icon-walk" v-show="item.walk"></i>
          <i class="icon-change" v-show="item.change"></i>
        </div>
        <div class="plan-data">
          <span class="time">约{{(item.time/ 60).toFixed(0)>59?`${parseInt((item.time/ 60).toFixed(0) / 60)}小时${(item.time/ 60).toFixed(0) % 60}分钟`:`${(item.time/ 60).toFixed(0)}分钟`}}</span>
          <span class="travel">{{item.transit_distance>1000?`${(item.transit_distance / 1000).toFixed(2)}公里`:`${item.transit_distance}米`}}</span>
          <span class="walk">步行{{item.walking_distance>1000?`${(item.walking_distance / 1000).toFixed(2)}公里`:`${item.walking_distance}米`}}</span>
          <span class="price">{{item.cost}}元</span>
        </div>
      </li>
    </ul>
    <div class="bus-tool">
      <vBanner></vBanner>
    </div>
  </div>
</template>
<script>
  import vBanner from '../components/banner/banner.vue'
  import {Toast} from 'mint-ui'
  import {getPlan} from '../utils/public'

  export default {
    data() {
      return {
        planSelect: [],
        planDetail: []
      }
    },
    components: {vBanner},
    mounted() {
      this.onReady()
    },
    methods: {
      toSearch() {
        this.$router.push('/lineQuery')
      },
      onReady() {
        let planSelect = JSON.parse(localStorage.getItem('planSelect'))
        if (planSelect) {
          this.planSelect = planSelect
          getPlan(planSelect, (data) => {
            data.forEach((v, i) => {
              let lines = []
              v.start = planSelect.originVal.txt
              v.end = planSelect.terminalVal.txt
              v.segments.forEach((v2, i2) => {
                if (v2.transit_mode !== 'WALK') {
                  v.noSubway = true
                  let obj = {}
                  obj.lineNo = v2.instruction.substring(2, v2.instruction.indexOf('('))
                  lines.push(obj)
                }
                if (v2.transit_mode === 'SUBWAY') {
                  v.subway = true
                }
              })
              v.lines = lines
            })
            data.sort(this.compareLength('lines'))
            data[0].change = true
            data.sort(this.compare('walking_distance'))
            data[0].walk = true
            data.sort(this.compare('time'))
            data[0].fast = true
            this.planDetail = data
          })
        } else {
          Toast({message: '未选择起始点', duration: 1500})
        }
      },
      lessTime() {
        this.planDetail.forEach((v, i) => {
          v.noSubway = true
        })
        this.planDetail.sort(this.compare('time'))
      },
      lessWalk() {
        this.planDetail.forEach((v, i) => {
          v.noSubway = true
        })
        this.planDetail.sort(this.compare('walking_distance'))
      },
      lessChange() {
        this.planDetail.forEach((v, i) => {
          v.noSubway = true
        })
        this.planDetail.sort(this.compareLength('lines'))
      },
      noSubway() {
        this.planDetail.forEach((v, i) => {
          v.noSubway = true
          if (v.subway) {
            v.noSubway = false
          }
        })
      },
      toPlanDetail(item) {
        localStorage.setItem('planDetail', JSON.stringify(item))
        this.$router.push('/planDetail')
      },
      compare(property) {
        return function (a, b) {
          let value1 = a[property]
          let value2 = b[property]
          return value1 - value2
        }
      },
      compareLength(property) {
        return function (a, b) {
          let value1 = a[property].length
          let value2 = b[property].length
          return value1 - value2
        }
      }
    }
  }
</script>
<style scoped>
  @import "../assets/css/planSelect.css";
</style>
